<script lang="ts" setup>
import { ref } from 'vue'
import RechargeDialog from '@/views/user/info/RechargeDialog.vue';
import { userService } from '@/service';

const rechargeDialogRef = ref();
const userInfo = ref();

queryUserInfo();

function openRechargeDialog(){
  rechargeDialogRef.value.open();
}

async function queryUserInfo() {
  const res = await userService.queryUserInfo();
  if (res.success) {
    userInfo.value = res.result;
  }
}
</script>

<template>
  <div class="user-profile">
    <div class="profile-content">
<!--        <el-row :gutter="40" class="profile-row">
          <el-col :span="8" class="label-col">
            <span>用户头像:</span>
          </el-col>
          <el-col :span="16">
            <el-avatar
              :size="100"
              :src="userInfo.avatar"
              shape="square"
            />
          </el-col>
        </el-row>-->

      <el-row :gutter="40" class="profile-row">
        <el-col :span="8" class="label-col">
          <span>用户ID:</span>
        </el-col>
        <el-col :span="16">
          <span>{{ userInfo.id }}</span>
        </el-col>
      </el-row>

        <el-row :gutter="40" class="profile-row">
          <el-col :span="8" class="label-col">
            <span>用户名称:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ userInfo.nickname }}</span>
          </el-col>
        </el-row>

        <el-row :gutter="40" class="profile-row">
          <el-col :span="8" class="label-col">
            <span>注册日期:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ userInfo.createdAt }}</span>
          </el-col>
        </el-row>

        <el-row :gutter="40" class="profile-row">
          <el-col :span="8" class="label-col">
            <span>码豆:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ userInfo.id }}</span>
            <span class="recharge-button"><el-button type="success" @click="openRechargeDialog">充值</el-button></span>
          </el-col>
        </el-row>

        <el-row :gutter="40" class="profile-row">
          <el-col :span="8" class="label-col">
            <span>电子邮箱:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ userInfo.email }}</span>
          </el-col>
        </el-row>
      </div>
  </div>
  <RechargeDialog ref="rechargeDialogRef"/>
</template>

<style scoped>
.user-profile {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

.profile-content {
  padding: 20px 0;
}

.profile-row {
  margin-bottom: 20px;
  align-items: center; /* 垂直居中 */
}

.label-col {
  text-align: right;
  font-weight: bold;
  color: #606266;
  padding-right: 50px; /* 大幅增加名称和值之间的距离 */
}

.recharge-button{
  margin-left: 20px;
}
</style>



